<template>
	<view class="bg">
		<!-- 顶部导航部分 -->
		<view class="top">
			<view class="title_header">
				<view class="jiantou" @click="back"></view>
				<text>卡券管理</text>
			</view>
		</view>

		<!-- 新增优惠卷 -->
		<view class="youhuijuan">
			<image src="/static/加号@2x.png" @click="jia"></image>
			<!-- <view>新增优惠劵</view> -->
		</view>

		<!-- 卡片内容 -->
		<view>
			<uni-card>
				<view class="rectangle">
					<div class="one" :class="{ 'item': true, 'active': activeIndex === 0}" @click="change()">进行中</div>
					<div class="two" :class="{ 'item': true, 'active': activeIndex === 1}" @click="change1()">已结束</div>
				</view>


				<view class="content" v-if="activeIndex===0">
					<!-- 进行中的优惠卷 -->
					<block v-for="(item,index) in list" key="index">
						<view class="content-text1">
							<!-- 左边部分 -->
							<view class="left">
								<view class="discount">满{{item.triggerMoney}}元可用</view>
								<!-- 分两种情况 -->
								<view class="money" v-if="item.discount!=null">
									<view class="fuhao">￥</view>
									<view class="number">{{item.discount}}</view>
								</view>
								<view class="money" v-if="item.preferentialMoney!=null">
									<view class="fuhao">￥</view>
									<view class="number">{{item.preferentialMoney}}</view>
								</view>

							</view>

							<!-- 右边部分 -->
							<view class="right">
								<view class="discountname">优惠卷名称:{{item.couponName}}</view>
								<view>有效期:{{item.expirationStart}}~{{item.expirationEnd}}</view>
								<view class="limitone">每人限领{{item.limitReceive}}张</view>
							</view>
						</view>
					</block>
				</view>

<!-- 结束的优惠卷 -->
				<view class="content" v-if="activeIndex===1">
					
					<block v-for="(item,index) in list" key="index">
					<view class="content-text1">
						<!-- 左边部分 -->
						<view class="left2">
							<view class="discount">满{{item.triggerMoney}}元可用</view>
							<!-- 分两种情况 -->
								<view class="money" v-if="item.discount!=null">
									<view class="fuhao">￥</view>
									<view class="number">{{item.discount}}</view>
								</view>
								<view class="money" v-if="item.preferentialMoney!=null">
									<view class="fuhao">￥</view>
									<view class="number">{{item.preferentialMoney}}</view>
								</view>
							</view>

						<!-- 右边部分 -->
						<view class="right2">
							<view class="discountname">优惠卷名称:{{item.couponName}}</view>
							<view>有效期:{{item.expirationStart}}~{{item.expirationEnd}}</view>
							<view class="limitone">每人限领{{item.limitReceive}}张</view>

							<!-- 已结束的标志 -->
							<view class="over">
								<image src="/static/已结束.png"></image>
							</view>

						</view>
					</view>
					</block>
				</view>

			</uni-card>
		</view>

	</view>
	</view>
</template>

<script>
	import list from '../../uni_modules/uview-ui/libs/config/props/list'
	export default {
		data() {
			return {
				activeIndex: 0,
				list: []
			}
		},
		onLoad() {
			const that = this; // 保存 this 的引用
			uni.request({
				url: 'http://localhost:8080/carShop/couponszh/carryout',
				method: "GET",
				success: function(res) {
					console.log(res);
					if (res.statusCode === 200) {
						// console.log(res.data.list)
						console.log(res.data);
						that.$set(that, 'list', res.data); // 直接更新 list
						that.list = res.data
					} else {
						console.error('请求失败，状态码：', res.statusCode);
					}
				},
				fail: function(err) {
					console.error('请求失败：', err);
				}
			});
		},
		onShow() {
			// this.CardManage()
		},
		methods: {
			change() {
				this.activeIndex = 0;
				const that = this; // 保存 this 的引用
				uni.request({
					url: 'http://localhost:8080/carShop/couponszh/carryout',
					method: "GET",
					success: function(res) {
						console.log(res);
						if (res.statusCode === 200) {
							// console.log(res.data.list)
							console.log(res.data);
							that.$set(that, 'list', res.data); // 直接更新 list
							that.list = res.data
						} else {
							console.error('请求失败，状态码：', res.statusCode);
						}
					},
					fail: function(err) {
						console.error('请求失败：', err);
					}
				});
			},
			change1() {
				this.activeIndex = 1;
				const that = this; // 保存 this 的引用
				uni.request({
					url: 'http://localhost:8080/carShop/couponszh/carryout2',
					method: "GET",
					success: function(res) {
						console.log(res);
						if (res.statusCode === 200) {
							// console.log(res.data.list)
							console.log(res.data);
							that.$set(that, 'list', res.data); // 直接更新 list
							that.list = res.data
						} else {
							console.error('请求失败，状态码：', res.statusCode);
						}
					},
					fail: function(err) {
						console.error('请求失败：', err);
					}
				});
				
				
			},
			jia() {
				uni.navigateTo({
					url: '/pages/offering_coupons/offering_coupons'
				})
			},
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		position: relative;
		background-color: #3785f6;
		width: 750rpx;
		height: 450rpx;
	}

	/* 导航栏样式 */
	.top {
		width: 750rpx;
	}

	.title_header {
		display: flex;
		padding-top: 60rpx;
	}

	.title_header>text {
		font-size: 35rpx;
		color: white;
		margin-left: 270rpx;
	}

	.jiantou {
		border-bottom: 6rpx solid white;
		border-left: 6rpx solid white;
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		transform: rotate(45deg);
	}

	/* 新增优惠卷样式 */
	// .youhuijuan {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
		

	// }

	.youhuijuan image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 650rpx;
		top: 180rpx;
		z-index: 9;
	}

	uni-card {

		position: absolute;
		// top: 80rpx;
		// margin-top: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}

	/* 进行中已结束样式 */
	.rectangle {
		height: 40px;
		margin: 0 auto;
		width: 150px;
		background-color: pink;
		border-radius: 30px;
		text-align: center;
		line-height: 40px;
		border: 1px solid #eeeeee;

		.item {
			color: #2276FF;
			background-color: #eeeeee;
			font-size: 16px;
		}

		.item.active {
			color: #eeeeee;
			background-color: #2276FF;
		}
	}


	.rectangle .one {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}

	.rectangle .two {
		float: left;
		height: 40px;
		width: 75px;
		background-color: #eeeeee;
		color: #009AFF;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	/* 展示内容(优惠卷)样式 */
	.content {
		width: 610rpx;
		margin-top: 30rpx;

	}

	.content-text1 {
		display: flex;
		margin-bottom: 40rpx;

	}

	.content-text1 .left {
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom, #ff9272, #ff783a);
		color: white;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 55rpx;
	}

	.content-text1 .left2 {
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom, #ffbb99, #ffbb99);
		color: white;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 55rpx;
	}

	.left .discount {
		font-size: 29rpx;
		text-align: center;
	}

	.left .money {
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}

	.left2 .discount {
		font-size: 29rpx;
		text-align: center;
	}

	.left2 .money {
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}

	.money .number {
		font-size: 78rpx;
	}

	/* 右边样式 */
	.content-text1 .right {
		width: 410rpx;
		background-color: #fff3eb;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}

	.right .discountname {
		font-weight: bold;
		color: black;
		padding-bottom: 8rpx;
	}

	.right .limitone {
		margin-top: 30rpx;
	}

	.content-text1 .right2 {
		width: 410rpx;
		background-color: #f2f2f2;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}

	.right2 .discountname {
		font-weight: bold;
		color: #b8b8b8;
		padding-bottom: 8rpx;
	}

	.right2 .limitone {
		margin-top: 30rpx;
	}

	.over image {
		position: absolute;
		top: 260rpx;
		left: 500rpx;
		width: 120rpx;
		height: 70rpx;
	}

	.over2 image {
		position: absolute;
		top: 510rpx;
		left: 500rpx;
		width: 120rpx;
		height: 70rpx;
	}
</style>